<div class="user">
  <!-- 头部导航栏 -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" class="tablist-first">管理员</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">编辑</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">会员</a></li>
    <div class="user-option">
      <button type="button" class="btn btn-primary" id="user-add">新增</button>
    </div>
  </ul>

  <!-- 中间追加用户信息 -->
  <div class="tab-content">
    <!-- 用户信息 -->
    <div role="tabpanel" class="tab-pane active user-informaiton" id="home">
      <!-- 追加div用户信息 -->
    </div>

    <div role="tabpanel" class="tab-pane user-informaiton" id="profile">
      <!-- 编辑 -->
      <div class="user-option">
        <button type="button" class="btn btn-primary" id="user-add">新增</button>
      </div>
    </div>

    <div role="tabpanel" class="tab-pane user-informaiton" id="messages">
      <!-- 会员 -->
    </div>
  </div>
  
  <!-- 模态框 -->
  <div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="user-modalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="user-modalLabel">添加编辑</h4>
        </div>
        <div class="modal-body">
          <!-- 表单 -->
          <form class="form-horizontal">
            <div class="form-group">
              <label for="user-username" class="col-sm-2 control-label">用户名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="user-username" placeholder="请输入用户名">
              </div>
            </div>
            <div class="form-group">
              <label for="user-password" class="col-sm-2 control-label">密码</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="user-password" placeholder="请输入密码">
              </div>
            </div>
            <div class="form-group">
              <label for="user-nickname" class="col-sm-2 control-label">真实姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="user-nickname" placeholder="请输入真实姓名">
              </div>
            </div>
            <div class="form-group">
              <label for="user-Email" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="user-Email" placeholder="请输入Email">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button id="user-save" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

<script>
  /* $('#nav-tabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  }) */

  // 所有的用户数据
  var userData = [];
  // 当前修改的用户对象
  var currentUser = {};
  findUser();
  function findUser(){
    //清空findUser多次执行的数据
    $('.user-informaiton').empty();
    myAjax('/manager/user/findAllUser','get',{},function(res){
      //res.data所有的用户数据
      userData = res.data;
      //console.log(userData);
      res.data.forEach(function(item){
        var $div = $(
          `
        <div class="user-info">
          <div class="user-img">
            <input type="checkbox" value="`+item.id+`">
          </div>
          <div class="user-nickname">
            <span>用户名：</span>
            <span>`+item.nickname+`</span>
          </div>
          <div class="user-username">
            <span>真实姓名：</span>
            <span>`+item.username+`</span>
          </div>
          <div class="user-iphone">
            <span>手机号：</span>
            <span>18812344321</span>
          </div>
          <div class="user-email">
            <span>email:</span>
            <span>`+item.email+`</span>
          </div>
          <div class="user-operation">
            <span>操作：</span>
            <span class="user-delete"><i class="fa fa-trash-o" title="删除"></i></span>
            <span class="user-edit"><i class="fa fa-pencil-square-o" title="修改"></i></span>
          </div>
        </div>
          `
        );
        //console.log(item.id);
        $('.user-informaiton').append($div);
      })
    })

  }

  //新增  设置模态框标题，清空内部表单内容，显示模态框
  $('#user-add').click(function () {
    //显示模态框
    currentUser = {};
    //清空内部表单内容
    $('#user-username').val('');
    $('#user-password').val('');
    $('#user-nickname').val('');
    $('#user-Email').val('');
    $('#user-modalLabel').text('添加编辑');
    $('#user-modal').modal('show');
  });

  // 修改  事件代理   设置模态框标题，设置内部表单内容(未实现***)，显示模态框
  $('.user-informaiton').on('click', '.user-edit', function () {
    var id = $(this).closest('.user-info').find('[type=checkbox]').val();
    // 通过id获取当前修改的对象，要去所有的栏目数组中进行过滤
    currentUser = userData.filter(function(item){
      return item.id ==id;
    })[0];
    $('#user-username').val(currentUser.username);
    $('#user-password').val(currentUser.password);
    $('#user-nickname').val(currentUser.nickname);
    $('#user-Email').val(currentUser.email);
    $('#user-modalLabel').text('修改用户信息');
    $('#user-modal').modal('show');
  })

  //保存 模态框内的确定按钮  获取数据，验证数据，访问后台保存
  $('#user-save').click(function(){
    //获取表单数据
    var username = $('#user-username').val();
    var password = $('#user-password').val();
    var nickname = $('#user-nickname').val();
    var Email = $('#user-Email').val();
    //验证数据
    if(username && password && nickname && Email){
      //封装数据，保存
      var obj = {
        id: currentUser.id,
        username: username,
        password: password,
        nickname: nickname,
        email: Email,
      };
      //console.log(obj);
      myAjax('/manager/user/reg','post',obj,function(res){
        if(res.status==200){
          alert('更新数据成功');
          findUser();
          //关闭模态框
          $('#user-modal').modal('hide');
        }else{
          alert('保存失败！连接不到数据库啦');
          $('#user-modal').modal('hide');
        }
      },function(err){
        alert('保存失败！连接不到数据库啦');
        $('#user-modal').modal('hide');
      });
    } else {
      alert('请填写全部信息');
    } 
  });

  // 单个删除 事件代理
  $('.user-informaiton').on('click', '.user-delete', function () {
    // 获取要删除的id
    var id = $(this).closest('.user-info').find('[type=checkbox]').val();
    var result = confirm('是否确认删除?');
    if (result) {
      // 删除  与后台进行数据交互
      myAjax('/manager/user/deleteUserById', 'get', { id: id }, function (res) {
        if (res.status == 200) {
          alert('删除成功');
          // 更新页面的数据
          findUser();
        } else {
          alert('删除失败');
        }
      }, function (err) {
        alert('删除失败');
      });
    }
  });

</script>
